<template>
        <Tree ref="DeptTree" :data="data1" :render="renderContent" ></Tree>
        <!-- :render="renderContent" :load-data="loadDatatree"-->
</template>
<script>
    export default {
        name: 'DeptTree',
        data() {
            return {
                data1: [],
                treeid: 0,
                treename:null,
                isLeaf:null,
            }
        },
        created: function () {
            this.postRequest('/dept/treeListById').then(res => {
                console.log(res)
                if (res.code == 20000) {
                    this.data1 = res.data
                } else {
                    this.$Message.error({
                        content: res.message,
                        duration: 5
                    });
                }
            })
        },
        methods: {
            selectOne(data) {
                console.log(data)
                this.treeid=data.id
                this.treename=data.title
                this.isLeaf=data.isLeaf
                this.$emit('on-success-valid', {
                    data:this.treeid,
                    dataname:this.treename,
                    isLeaf:this.isLeaf,
                    typeInt:data.typeInt
                })
            },
            // loadDatatree(item, callback) {
            //     if(item.children.length==0){
            //         this.getRequest('/dept/treeListById?parentId=' + item.id).then(res => {
            //             if (res.code == 20000) {
            //                 if (!res.data.isLeaf) {
            //                     const data = res.data
            //                     callback(data)
            //                 }else{
            //                     delete res.data.children
            //                     const data = res.data
            //                     callback(data)
            //                     //const data = res.data
            //                 }
            //             } else {
            //                 this.$Message.error({
            //                     content: res.message,
            //                     duration: 5
            //                 });
            //             }
            //         })
            //     }
            // },
            renderContent (h, { root, node, data }) {
                if (!data.isLeaf) {
                    return h('span', {
                        style: {
                            display: 'inline-block',
                            width: '100%'
                        },
                        on:{
                                click:()=>{
                                    this.selectOne(data);
                                }
                            }
                        }, [
                            h('span', [
                                h('Icon', {
                                    props: {
                                        type: 'ios-planet',
                                        size:"20"
                                    },
                                    style: {
                                        marginRight: '2px'
                                    }
                                }),
                                h('span',{
                                    style:{
                                        color:'#666',
                                        cursor:'pointer'
                                    },
                                    domProps:{
                                        className:'btn'
                                    },
                                    on:{
                                        click:(e)=>{
                                            let btns=this.$refs.DeptTree.$el.querySelectorAll('.btn')
                                            for(let i=0;i<btns.length;i++){
                                                btns[i].style.color='#515a6e'
                                            }
                                            e.path[0].style.color="#8c0776";//当前点击的元素
                                        }
                                    }
                                },data.title)
                            ]),
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    float: 'right',
                                    marginRight: '32px'
                                }
                            },)
                        ]);
                    }else{
                        return h('span', {
                            style: {
                                display: 'inline-block',
                                width: '100%'
                            },
                            on:{
                                click:()=>{
                                    this.selectOne(data);
                                }
                            }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-podium',
                                            size:"20"
                                        },
                                        style: {
                                            marginRight: '2px'
                                        }
                                    }),
                                    h('span',{
                                        style:{
                                            color:'#666',
                                            cursor:'pointer'
                                        },
                                        domProps:{
                                            className:'btn'
                                        },
                                        on:{
                                            click:(e)=>{
                                                let btns=this.$refs.DeptTree.$el.querySelectorAll('.btn')
                                                for(let i=0;i<btns.length;i++){
                                                    btns[i].style.color='#515a6e'
                                                }
                                                e.path[0].style.color="#8c0776";//当前点击的元素
                                            }
                                        }
                                    },data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                },)
                            ]);
                    }
            }
            
        }
    }
</script>